import PropTypes from 'prop-types'
import React from 'react'
// import CSSModules from '../../lib/CSSModules'
// import styles from './NewNoteButton.styl'
import _ from 'lodash'
import modal from '../../main/lib/modal'
import NewNoteModal from '../../main/modals/NewNoteModal'
import eventEmitter from '../../main/lib/eventEmitter'
import i18n from '../../lib/i18n'
import { createMarkdownNote, createSnippetNote } from '../../lib/newNote'
import IconButton from '@material-ui/core/IconButton';
import Tooltip from '@material-ui/core/Tooltip';

const { remote } = window.require('electron')
const { dialog } = remote

const OSX = window.process.platform === 'darwin'

class NewNoteButton extends React.Component {
  constructor(props) {
    super(props)

    this.state = {open:false}

    this.handleNewNoteButtonClick = this.handleNewNoteButtonClick.bind(this)
    this.onClose=this.onClose.bind(this); 
  }

  componentDidMount() {
    eventEmitter.on('top:new-note', this.handleNewNoteButtonClick)
  }

  componentWillUnmount() {
    eventEmitter.off('top:new-note', this.handleNewNoteButtonClick)
  }

  handleNewNoteButtonClick(e) {
    const {
      location,
      dispatch,
      match: { params },
      config
    } = this.props
    const { storage, folder } = this.resolveTargetFolder()

    console.log(storage)
    console.log(folder)
    if (config.ui.defaultNote === 'MARKDOWN_NOTE') {
      createMarkdownNote(
        storage.key,
        folder.key,
        dispatch,
        location,
        params,
        config
      )
    } else if (config.ui.defaultNote === 'SNIPPET_NOTE') {
      createSnippetNote(
        storage.key,
        folder.key,
        dispatch,
        location,
        params,
        config
      )
    } else {
      this.setState({open:true,    
          storage: storage.key,
         folder: folder.key,
         dispatch,
         location,
         params,
         config});
      // modal.open(NewNoteModal, {
      //   storage: storage.key,
      //   folder: folder.key,
      //   dispatch,
      //   location,
      //   params,
      //   config
      // })
    }
  }

  resolveTargetFolder() {
    const {
      data,
      match: { params }
    } = this.props
    let storage = data.storageMap.get(params.storageKey)
    // Find first storage
    if (storage == null) {
      for (const kv of data.storageMap) {
        storage = kv[1]
        break
      }
    }

    if (storage == null)
      this.showMessageBox(i18n.__('No storage to create a note'))
    const folder =
      _.find(storage.folders, { key: params.folderKey }) || storage.folders[0]
    if (folder == null)
      this.showMessageBox(i18n.__('No folder to create a note'))

    return {
      storage,
      folder
    }
  }

  showMessageBox(message) {
    dialog.showMessageBox(remote.getCurrentWindow(), {
      type: 'warning',
      message: message,
      buttons: ['OK']
    })
  };
  onClose=()=>{
    this.setState({open:false});
  };
  render() {
    const { config, style } = this.props
    // console.log("new button render=====")
    // console.log(this.state);
    return (
      <div
        className='NewNoteButton'
        className={config.isSideNavFolded ? 'root--expanded' : 'root'}
        style={style}
      >
        <div className='control'>
          <Tooltip title={i18n.__('Make a note')}>
          <IconButton
            className='control-newNoteButton'
            onClick={this.handleNewNoteButtonClick}
          >
            <img src='../resources/icon/icon-newnote.svg' />
          </IconButton>
          </Tooltip>
        </div>
        <NewNoteModal folder={this.state.folder} 
            storage={this.state.storage}
            dispatch={this.state.dispatch}
            location={this.state.location}
            params={this.state.params}
            config={this.state.config}
            open={this.state.open} onClose={this.onClose}>
        </NewNoteModal>
      </div>
    )
  }
}
// folder: folder.key,
//          dispatch,
//          location,
//          params,
//          config
NewNoteButton.propTypes = {
  dispatch: PropTypes.func,
  config: PropTypes.shape({
    isSideNavFolded: PropTypes.bool
  })
}

export default NewNoteButton;// CSSModules(NewNoteButton, styles)
